<template>
  <div class="zhts-menu">
    <h2 class="zhts-title">
      <div class="logo"></div>
      <span class="text">AIS数据可视化平台</span>
    </h2>
    <mars-menu>
      <template v-for="(menu, i) in zhtsMenu" :key="i">
        <mars-menu-item :class="{ 'mars-menu-item-active': menu.check }" v-if="!menu.children && !menu.menus" @click="selectMenu(menu)">
          <template v-if="menu.icon" #icon>
            <mars-icon :icon="menu.icon" width="20"></mars-icon>
          </template>
          <span>{{ menu.name }}</span>
        </mars-menu-item>

        <mars-sub-menu v-else>
          <template v-if="menu.icon" #icon>
            <mars-icon :icon="menu.icon" width="20"></mars-icon>
          </template>
          <template #title>
            <span>{{ menu.name }}</span>
          </template>
          <template v-if="menu.children">
            <mars-menu-group v-for="(sub, j) in menu.children" :key="j" :title="sub.name">
              <template v-if="sub.icon" #icon>
                <mars-icon :icon="sub.icon" width="18"></mars-icon>
              </template>
              <mars-menu-item v-for="(m, k) in sub.menus" :key="k" @click="selectMenu(m)">{{ m.name }}</mars-menu-item>
            </mars-menu-group>
          </template>

          <template v-if="menu.menus">
            <mars-menu-item v-for="(m, k) in menu.menus" :key="k" @click="selectMenu(m)">
              <template v-if="m.icon" #icon>
                <mars-icon :icon="m.icon" width="18"></mars-icon>
              </template>
              <span>{{ m.name }}</span>
            </mars-menu-item>
          </template>
        </mars-sub-menu>
      </template>
    </mars-menu>
    <!-- <mars-menu class="login-Item">
      <mars-sub-menu placement="middle">
        <template #icon>
          <mars-icon class="login-icon" icon="user" width="28"></mars-icon>
        </template>
        <template #title></template>
        <mars-menu-item>
          <span>{{ userName }}</span>
        </mars-menu-item> -->

    <!-- <mars-menu-item @click="logOut">
          <span>
            <span>退出</span>
            <mars-icon class="login-out" icon="logout" width="16"></mars-icon>
          </span>
        </mars-menu-item> -->
    <!-- </mars-sub-menu> -->
    <!-- </mars-menu> -->
  </div>
  <div class="zhts-container">
    <main-view @mapLoaded="mapLoaded" />
  </div>
</template>

<script setup lang="ts">
import MainView from "@mars/components/mars-work/main-view.vue"
import { ref, reactive } from "vue"
// import { clearUserContext } from "@mars/utils/mars-util"
import { useWidget } from "@mars/common/store/widget"
// import localforage from "localforage"
// import { loginOut } from "@mars/common/api"
import { $message } from "@mars/components/mars-ui"
// import { getParam } from "@mars/utils/file-util"
import * as mars2d from "mars2d"

const { activate, disable, disableAll, getWidget } = useWidget()
// const * as useWidget = useWidget()

interface ZhztMenu {
  name: string
  icon?: any
  check?: boolean
  callback?: () => void
  children?: ZhztMenu[]
  menus?: ZhztMenu[]
  data?: any
  layerId?: number | number[]
  widget?: string | string[]
  autoDisable?: boolean
}

let mapInstance: any = null
function mapLoaded(map: any) {
  mapInstance = map
}
// 单击后变false
const activeState = ref(false)
const userName = ref()
// localforage.getItem("userName").then((user: string) => {
//   userName.value = user || "火星科技"
// })

const zhtsMenu: ZhztMenu[] = reactive([
  // {
  //   name: "过闸统计",
  //   check: false,
  //   icon: "home",
  //   widget: ["statistic-ship", "statistic-cargo"]
  // },
  // {
  //   name: "船舶动态",
  //   icon: "trace",
  //   check: false,
  //   widget: ["visualize-ship"]
  // },
  {
    name: "过闸模拟",
    icon: "ship",
    check: true,
    widget: "visualize-trace"
  }
])

const selectMenu = (menu: ZhztMenu) => {
  zhtsMenu.forEach((item) => {
    if (item.name === menu.name) {
      activate(item.widget, false)
      item.check = true
    } else {
      disable(item.widget)
      item.check = false
    }
  })

  // changeState(menu)
  // if (menu.callback) {
  //   menu.callback()
  // }
  // if (menu.widget) {
  //   const widgetOption: any = {
  //     name: menu.widget
  //   }
  //   if (menu.data) {
  //     widgetOption.data = {
  //       ...menu.data
  //     }
  //   }
  //   activate(widgetOption)
  // }
}

function changeState(menu) {
  zhtsMenu.forEach((item) => {
    // activate(widgetOption)
    // for (let i = 0; i < item.widget.length; i++) {
    //   const element: any = item.widget[i]
    //   // const widget: Widget = getWidget(item.widget[i])
    //   if (item.name === menu.name) {
    //     activate(widgetOption)
    //     // widget.setViewShow(true)
    //     widget.visible = false
    //   } else {
    //     // widget.setViewShow(false)
    //     widget.visible = false
    //   }
    // }
  })
}

// const moduleSys = getParam("module")
// const tokenPara = getParam("t_k_menu")
// const accidentX = getParam("accidentX")
// const accidentY = getParam("accidentY")
// const accidentName = getParam("accidentName")
// if (moduleSys) {
//   changeState({ widget: moduleSys.split(",")[0], check: false })
// }
// if (tokenPara) {
//   localStorage.setItem("mars-user-token", tokenPara)
// }

// if (accidentX) {
//   localStorage.setItem("accidentX", accidentX)
// }
// if (accidentY) {
//   localStorage.setItem("accidentY", accidentY)
// }
// if (accidentName) {
//   localStorage.setItem("accidentName", accidentName)
// }
// const logOut = () => {
//   loginOut()
//     .then((res) => {
//       if (res.msg === "success") {
//         clearUserContext()
//         location.href = "./login.html"
//       } else {
//         $message(res.msg)
//       }
//     })
//     .catch((e) => {
//       location.href = "./login.html"
//     })
// }
</script>

<style scoped lang="less">
.zhts-menu {
  height: 70px;
  background: var(--zhts-title-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1000;
  .mars-menu {
    .mars-menu-item-active {
      background: #125c9b;
    }
  }
  .login-Item {
    float: right;
    :deep(.mars-menu-icon) {
      padding: 0 12px;
    }
    :deep(.sub-menu-content) {
      transform: none;
    }
    :deep(.mars-menu-item) {
      min-width: 100%;
    }
  }
}
.zhts-title {
  display: inline-block;
  height: 70px;
  width: 460px;
  background-image: var(--zhts-title-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  text-shadow: 0px 2px 6px #123756;
  .logo {
    width: 30px;
    height: 70px;
    margin-left: 10px;
    display: inline-block;
    //background: url("@mars/components/mars-ui/assets/images/logo.png");
    background-size: 120% 120%;
    background-repeat: no-repeat;
    background-position: -5px -5px;
  }
  .text {
    font-size: 25px;
    line-height: 70px;
    font-weight: bold;
    vertical-align: top;
  }
}
.zhts-logo {
  width: 40px;
  margin-left: 10px;
  vertical-align: middle;
}
.zhts-container {
  height: calc(100% - 70px);
}
.login-out {
  margin-left: 10px;
  vertical-align: sub;
}
.login-icon {
  position: relative;
  top: 7px;
}
</style>
